<html>

    <head>
        <title>打地鼠</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css">
    </head> 
    <body>
       <audio src="audio/music.mp3" autoplay loop></audio>
       <audio src="audio/dazhong.wav" id="yinxiao"></audio>
       <div id="score">得分：0</div>
       <table>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
       </table>
    </body>
    <script>

        
           
        // 获得所有的img标签(老鼠)
       var mouses = document.getElementsByTagName("img");
        //  定义一个函数，用于显示一只老鼠
       function showOne(){
                // 生成一个0~1的随机数
                var n = Math.random();
                n = n*16;
                // 向下取整
                n =Math.floor(n);
                mouses[n].classList.add("show");
                mouses[n].t =true;
                function hide(){
                    mouses[n].classList.remove("show");
                }
                // 两秒之后，调用hide函数，让老鼠隐藏
                setTimeout(hide,3000);
        }
            //  一秒后调用showSome函数
            function showSome(){
                    showOne();
                    showOne();
                    
         }
       setInterval(showSome,1000);
        var player =document.getElementById("yinxiao");
        // 记录得分的变量
        var totle =0;

        var board = document.getElementById("score");
             // 为每一个img添加点击事件监听
        for(var i = 0;i<mouses.length;i++){
            function md(e){
                e.target.classList.remove("show");
                player.load();
                player.play();

                if(e.target.t){
                      totle=totle+10;
                    board.textContent = "得分："+totle;
                    e.target.t =false;
                }
              
            }

            mouses[i].onclick = md;

        }
        document.body.onmousedown = function(e){
            document.body.style.cursor = "url(image/cursor-down.png),auto";
        }

         document.body.onmouseup = function(e){
            document.body.style.cursor = "url(image/cursor.png),auto";
        }
        document.body.ondrop =function(e){
            e.stopPropagation();
            e.preventDefault();
        }
    </script>
</html>